<template>
	<view class="order-page">
		<!-- 下拉刷新 -->
		<scroll-view scroll-y="true" class="scroll-container" :refresher-enabled="true"
			:refresher-triggered="refreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">

			<!-- 状态筛选标签 -->
			<view class="status-tabs">
				<view v-for="(tab, index) in statusTabs" :key="index"
					:class="['tab-item', { active: currentTab === index }]" @click="switchTab(index)">
					{{ tab.name }}
				</view>
			</view>

			<!-- 订单列表 -->
			<view class="order-list">
				<view v-for="(order, index) in filteredOrders" :key="index" class="order-item"
					@click="goToOrderDetail(order)">
					<!-- 店铺信息 -->
					<view class="store-info">
						<text class="store-name">{{ order.storeName }}</text>
						<text class="order-status" :class="getStatusClass(order.status)">
							{{ getStatusText(order.status) }}
						</text>
					</view>

					<!-- 订单基本信息 -->
					<view class="order-basic-info">
						<text class="order-id">订单号: {{ order.id }}</text>
					</view>

					<!-- 商品信息 -->
					<view class="product-info">
						<view v-for="(product, pIndex) in order.products" :key="pIndex" class="product-item">
							<image :src="product.image" class="product-image" mode="aspectFill" />
							<view class="product-details">
								<text class="product-name">{{ product.name }}</text>
								<text class="product-spec">{{ order.spec }}</text>
								<view class="product-price-qty">
									<text class="product-price">¥{{ product.price }}</text>
									<text class="product-qty">x{{ product.quantity }}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 订单金额和操作按钮 -->
					<view class="order-amount-actions">
						<view class="order-amount">
							<text class="amount-label">应付金额:</text>
							<text class="amount-value">¥{{ order.totalAmount }}</text>
						</view>

						<view class="order-actions" v-if="order.status === 'unpaid'">
							<button class="action-btn pay-btn" @click.stop="payOrder(order)">立即付款</button>
							<button class="action-btn cancel-btn" @click.stop="cancelOrder(order)">取消订单</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="filteredOrders.length === 0" class="empty-state">
				<text class="empty-text">暂无订单</text>
			</view>

			<!-- 加载更多提示 -->
			<view v-if="hasMore && filteredOrders.length > 0" class="load-more">
				<text class="load-more-text">{{ loadingMore ? '加载中...' : '上拉加载更多' }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { get, post, put } from '@/config/request.js'
import { getCurrentMemberId, getUserInfo } from '@/utils/userState.js'

export default {
	name: 'MyOrders',
	data() {
		return {
			currentTab: 1,
			statusTabs: [
				{ name: '全部', value: 'all' },
				{ name: '待付款', value: 'unpaid' },
				{ name: '待发货', value: 'unshipped' },  // 包含：已付款 + 待发货
				{ name: '待收货', value: 'unreceived' },
				{ name: '已收货', value: 'received' },
				{ name: '已完成', value: 'completed' },
				{ name: '已取消', value: 'canceled' }
			],
			orders: [],
			pageNum: 1,
			pageSize: 10,
			hasMore: true,
			loadingMore: false,
			refreshing: false,
			memberId: '',
			userInfo: {},
			tokenStatus: '未知'
		}
	},
	async onShow() {
		// console.log('=== onShow 生命周期 ===');
		const tokenValid = await this.checkTokenStatus();
		if (tokenValid) {
			await this.loadOrders();
		}
	},

	async onLoad() {
		// console.log('=== onLoad 生命周期 ===');
		// onLoad 中不重复加载数据，避免与 onShow 冲突
	},

	onReady() {
		// console.log('=== onReady 生命周期 ===');
		// 页面渲染完成后，如果还没有数据，尝试加载
		if (this.orders.length === 0 && this.memberId) {
			// console.log('onReady: 页面就绪，尝试加载订单数据');
			this.loadOrders();
		}
	},
	computed: {
		filteredOrders() {
			// console.log('=== 计算过滤后的订单 ===');
			// console.log('当前标签索引:', this.currentTab);
			// console.log('当前标签值:', this.statusTabs[this.currentTab]?.value);
			// console.log('所有订单:', this.orders);
			// console.log('所有订单数量:', this.orders.length);
			// console.log('当前登录用户ID:', this.memberId);

			// 首先根据memberId过滤，只显示属于当前用户的订单
			const userOrders = this.orders.filter(order => {
				const orderMemberId = order.memberId;
				const isUserOrder = orderMemberId && orderMemberId.toString() === this.memberId.toString();
				// console.log(`订单${order.id}的memberId: ${orderMemberId}, 当前用户ID: ${this.memberId}, 是否匹配: ${isUserOrder}`);
				return isUserOrder;
			});

			// console.log('用户订单数量:', userOrders.length);

			// 然后根据状态标签过滤
			if (this.currentTab === 0) {
				// console.log('显示该用户所有订单');
				return userOrders;
			}

			const statusValue = this.statusTabs[this.currentTab].value;
			let filtered;

			// 特殊处理"待发货"标签，包含"已付款"和"待发货"状态的订单
			if (statusValue === 'unshipped') {
				filtered = userOrders.filter(order =>
					order.status === 'paid' || order.status === 'unshipped'
				);
			} else {
				filtered = userOrders.filter(order => order.status === statusValue);
			}

			// console.log('过滤条件:', statusValue);
			console.log('过滤后订单:', filtered);
			// console.log('过滤后数量:', filtered.length);

			return filtered;
		}
	},
	methods: {
		// 检查token状态并获取用户信息
		async checkTokenStatus() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}

			// 获取用户信息
			await this.getUserInfo();
			return true;
		},

		// 获取用户信息
		async getUserInfo() {
			try {
				// 直接从userState获取
				this.memberId = getCurrentMemberId();
				this.userInfo = getUserInfo();

				if (!this.memberId) {
					throw new Error('用户未登录');
				}
			} catch (error) {
				console.error('获取用户信息失败:', error);
				// 跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},

		// // 解析token并获取用户信息
		// async parseTokenAndGetUserInfo(token) {
		// 	try {
		// 		// 尝试从token中解析用户信息（如果token是JWT格式）
		// 		if (token && token.includes('.')) {
		// 			const payload = JSON.parse(atob(token.split('.')[1]));
		// 			if (payload.memberId) {
		// 				this.memberId = payload.memberId;
		// 				this.userInfo = { memberId: payload.memberId };

		// 				// 保存到本地存储
		// 				uni.setStorageSync('userInfo', this.userInfo);
		// 				return;
		// 			}
		// 		}

		// 		// 如果无法从token解析，尝试调用用户信息API
		// 		await this.fetchUserInfoFromAPI(token);
		// 	} catch (error) {
		// 		console.error('解析token失败:', error);
		// 	}
		// },

		// // 从API获取用户信息
		// async fetchUserInfoFromAPI(token) {
		// 	try {
		// 		const res = await get('/members/member/info', {
		// 			header: {
		// 				'Authorization': token
		// 			}
		// 		});
		// 		if (res.statusCode === 200 && res.data.success) {
		// 			this.userInfo = res.data.result || {};
		// 			this.memberId = this.userInfo.memberId || '';

		// 			// 保存到本地存储
		// 			uni.setStorageSync('userInfo', this.userInfo);
		// 		}
		// 	} catch (error) {
		// 		console.error('获取用户信息API失败:', error);
		// 	}
		// },

		// 加载订单数据
		async loadOrders(isLoadMore = false) {
			try {
				console.log('开始加载订单，当前用户ID:', this.memberId);
				if (!isLoadMore) {
					uni.showLoading({
						title: '加载中...'
					});
				}

				// 构建查询参数
				const params = new URLSearchParams({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					memberId: this.memberId
				});

				// 只有当不是"全部"标签时才添加orderStatus参数
				if (this.currentTab !== 0) {
					params.append('orderStatus', this.getOrderStatusByTab());
				}
				// 构建查询参数
				const queryParams = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					memberId: this.memberId
				};

				// 只有当不是"全部"标签时才添加orderStatus参数
				if (this.currentTab !== 0) {
					queryParams.orderStatus = this.getOrderStatusByTab();
				}

				// console.log('发送的查询参数:', queryParams);

				console.log('开始调用订单列表API:', {
					url: '/order/list',
					params: queryParams,
					memberId: this.memberId
				});

				const res = await get('/orders/order/list', {
					data: queryParams  // 使用data而不是params
				});

				console.log('订单列表API响应:', res);

				// 处理响应数据
				let responseData;
				// console.log('原始响应对象:', res);

				// 检查响应结构
				if (res && typeof res === 'object') {
					// 如果响应包含错误信息
					if (res.code && res.code !== 200) {
						console.error('API返回错误:', res.msg || res.message);
						throw new Error(res.msg || res.message || 'API请求失败');
					}

					// 直接使用响应数据
					responseData = res;
				} else {
					throw new Error('无效的响应格式');
				}

				// 确保在所有情况下都隐藏loading
				if (!isLoadMore) {
					uni.hideLoading();
				}

				// 检查响应状态
				if (responseData && (responseData.code === 200 || responseData.success)) {
					// console.log('=== 数据处理开始 ===');
					const rows = responseData.rows || [];

					// 检查API返回的订单数据中是否包含memberId
					if (rows.length > 0) {
						// console.log('=== 检查API返回的订单memberId ===');
						rows.forEach((order, index) => {
							// console.log(`订单${index + 1}的memberId字段:`, {
							// 	memberId: order.memberId,
							// 	buyerId: order.buyerId,
							// 	userId: order.userId,
							// 	member_id: order.member_id
							// });
						});
					}

					const newOrders = this.formatOrderData(rows);

					// console.log('格式化后的新订单:', newOrders);

					if (isLoadMore) {
						// console.log('加载更多模式 - 合并订单数据');
						// console.log('合并前订单数量:', this.orders.length);
						this.orders = [...this.orders, ...newOrders];
						// console.log('合并后订单数量:', this.orders.length);
					} else {
						// console.log('首次加载模式 - 替换订单数据');
						this.orders = newOrders;
						// console.log('替换后订单数量:', this.orders.length);
					}

					// 判断是否还有更多数据
					this.hasMore = newOrders.length === this.pageSize;
					// console.log('是否还有更多数据:', this.hasMore);

					// console.log('=== 订单数据加载成功 ===');
					console.log('最终订单数据:', this.orders);
					// console.log('订单数据加载成功:', {
					// 	total: rows.length,
					// 	memberId: this.memberId,
					// 	currentTab: this.currentTab,
					// 	finalOrdersCount: this.orders.length
					// });
				} else {
					// API返回失败
					if (isLoadMore) {
						this.pageNum--; // 回退页码
					}

					console.error('API响应失败:', responseData);
					const errorMessage = responseData.message || responseData.msg || '获取订单失败';
					uni.showToast({
						title: errorMessage,
						icon: 'none'
					});
				}
			} catch (error) {
				// 确保在所有错误情况下都隐藏loading
				if (!isLoadMore) {
					uni.hideLoading();
				}

				if (isLoadMore) {
					this.pageNum--; // 回退页码
				}

				console.error('加载订单失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		},

		// 根据当前标签获取订单状态
		getOrderStatusByTab() {
			const statusMap = {
				1: 'UNPAID',      // 待付款
				2: 'UNDELIVERED', // 待发货
				3: 'DELIVERED',   // 待收货
				4: 'COMPLETE',    // 已完成
				5: 'CANCELLED'    // 已取消
			};
			return statusMap[this.currentTab] || '';
		},

		// 格式化订单数据
		formatOrderData(apiOrders) {
			// console.log('=== 订单数据格式化开始 ===');
			// console.log('原始API订单数据:', apiOrders);
			// console.log('原始数据长度:', apiOrders.length);

			const formattedOrders = apiOrders.map((order, index) => {
				// console.log(`订单${index + 1}原始数据:`, order);

				const formattedOrder = {
					id: order.id || order.orderId,
					storeName: order.orderProductList[0].shopName,
					status: this.mapApiStatusToLocal(order.orderStatus),
					totalAmount: order.orderAmount || order.totalAmount || order.flowPrice || 0,
					createTime: order.createTime,
					buyerName: order.buyerName,
					spec: order.orderProductList[0].spec,
					consigneeName: order.consigneeName,
					consigneePhone: order.consigneePhone,
					consigneeAddress: order.consigneeAddress,
					products: this.formatProducts(order.orderProductList || []),
					// 保存API返回的memberId信息，用于后续过滤
					memberId: order.memberId || order.buyerId || order.userId || order.member_id
				};

				// console.log(`订单${index + 1}格式化后:`, formattedOrder);
				return formattedOrder;
			});

			// console.log('=== 格式化完成 ===');
			// console.log('格式化后的订单数据:', formattedOrders);
			// console.log('格式化后数据长度:', formattedOrders.length);

			return formattedOrders;
		},

		// 格式化商品数据
		formatProducts(orderItems) {
			// console.log('=== 商品数据格式化开始 ===');
			// console.log('原始商品数据:', orderItems);
			// console.log('商品数量:', orderItems.length);

			const formattedProducts = orderItems.map((item, index) => {
				// console.log(`商品${index + 1}原始数据:`, item);

				const formattedProduct = {
					name: item.goodsName || item.name || item.productName || '商品',
					price: item.price || item.unitPrice || item.productPrice || 0,
					quantity: item.num || item.quantity || item.productNum || 1,
					image: item.goodsImage || item.image || item.productImage || '/static/img/a.png',
					couponAmount: item.couponAmount || item.discount || 0
				};

				// console.log(`商品${index + 1}格式化后:`, formattedProduct);
				return formattedProduct;
			});

			// console.log('=== 商品格式化完成 ===');
			// console.log('格式化后的商品数据:', formattedProducts);

			return formattedProducts;
		},

		// 将API状态映射到本地状态
		mapApiStatusToLocal(apiStatus) {
			console.log('映射订单状态:', apiStatus);

			const statusMap = {
				// 英文状态
				'UNPAID': 'unpaid',
				'UNDELIVERED': 'unshipped',
				'DELIVERED': 'unreceived',
				'COMPLETE': 'completed',
				'CANCELLED': 'canceled',
				// 中文状态
				'已关闭': 'canceled',
				'待付款': 'unpaid',
				'已付款': 'paid',           // 已付款状态
				'待发货': 'unshipped',
				'已发货': 'shipped',        // 已发货状态
				'待收货': 'unreceived',
				'已收货': 'received',       // 已收货状态
				'已完成': 'completed',
				'已取消': 'canceled'
			};

			const mappedStatus = statusMap[apiStatus] || 'unpaid';
			console.log('映射后状态:', mappedStatus);

			return mappedStatus;
		},

		// 切换标签
		async switchTab(index) {
			this.currentTab = index;
			this.pageNum = 1;
			this.orders = [];
			this.hasMore = true;
			await this.loadOrders();
		},

		// 下拉刷新
		async onRefresh() {
			this.refreshing = true;
			this.pageNum = 1;
			this.orders = [];
			this.hasMore = true;
			await this.loadOrders();
			this.refreshing = false;
		},

		// 上拉加载更多
		async onLoadMore() {
			if (this.loadingMore || !this.hasMore) return;

			this.loadingMore = true;
			this.pageNum++;
			await this.loadOrders(true);
			this.loadingMore = false;
		},
		getStatusText(status) {
			const statusMap = {
				'unpaid': '未付款',
				'paid': '已付款',           // 已付款
				'unshipped': '待发货',
				'shipped': '已发货',        // 已发货
				'unreceived': '待收货',
				'received': '已收货',       // 已收货
				'completed': '已完成',
				'canceled': '已取消'
			}
			return statusMap[status] || '未知状态'
		},
		getStatusClass(status) {
			const classMap = {
				'unpaid': 'status-unpaid',
				'paid': 'status-paid',           // 已付款样式
				'unshipped': 'status-unshipped',
				'shipped': 'status-shipped',     // 已发货样式
				'unreceived': 'status-unreceived',
				'received': 'status-received',   // 已收货样式
				'completed': 'status-completed',
				'canceled': 'status-canceled'
			}
			return classMap[status] || ''
		},
		payOrder(order) {
			uni.showModal({
				title: '确认支付',
				content: `确认支付订单金额 ¥${order.totalAmount} 吗？`,
				confirmText: '确认支付',
				cancelText: '取消',
				success: async (res) => {
					if (res.confirm) {
						await this.processPayment(order);
					}
				}
			});
		},

		// 处理支付流程
		async processPayment(order) {
			try {
				uni.showLoading({
					title: '处理中...'
				});

				const res = await put(`/orders/order/edit/${order.id}/已付款/已付款`, {
					memberId: this.memberId 
				});

				console.log('支付API响应结果:', res);
				// 检查响应
				if (res && (res.code === 200 || res.success)) {
					// 更新本地订单状态
					const orderIndex = this.orders.findIndex(o => o.id === order.id);
					if (orderIndex !== -1) {
						this.orders[orderIndex].status = 'paid';
						this.orders[orderIndex].orderStatus = 'PAID';
						this.$set(this.orders, orderIndex, this.orders[orderIndex]);
					}

					uni.hideLoading();

					// 跳转到支付成功页面，并传递订单信息
					uni.navigateTo({
						url: `/pages/zhifuchenggong/zhifuchenggong?orderId=${order.id}&amount=${order.totalAmount}`
					});

					// 刷新订单列表
					setTimeout(() => {
						this.loadOrders();
					}, 1000);
				} else {
					throw new Error(res?.msg || res?.message || '支付失败');
				}

			} catch (error) {
				uni.hideLoading();
				console.error('支付处理失败:', error);

				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				});
			}
		},

		cancelOrder(order) {
			uni.showModal({
				title: '取消订单',
				content: '取消订单后,本单享有的优惠可能会一并取消,是否继续?',
				confirmText: '确认',
				cancelText: '取消',
				success: async (res) => {
					if (res.confirm) {
						await this.showCancelReasonModal(order);
					}
				}
			})
		},

		// 显示取消原因选择弹窗
		showCancelReasonModal(order) {
			uni.showActionSheet({
				itemList: ['未发货或缺货', '未按承诺时间发货'],
				success: async (res) => {
					const reasons = ['未发货或缺货', '未按承诺时间发货'];
					const selectedReason = reasons[res.tapIndex];
					await this.confirmCancelOrder(order, selectedReason);
				},
				fail: () => {
					// console.log('用户取消选择');
				}
			});
		},

		// 确认取消订单
		async confirmCancelOrder(order, reason) {
			try {
				uni.showLoading({
					title: '取消中...'
				});

				console.log('开始调用修改订单支付状态API (PUT):', {
					orderId: order.id,
					reason: reason,
					apiUrl: `/orders/order/edit/${order.id}/已取消/已关闭`,
					method: 'PUT'
				});

				// 调用修改订单支付状态API - 设置为已取消状态
				const res = await put(`/orders/order/edit/${order.id}/已取消/已关闭`, {
					memberId: this.memberId 
				});

				console.log('API响应结果:', res);

				// 检查响应
				if (res && (res.code === 200 || res.success)) {
					// 更新本地订单状态
					const orderIndex = this.orders.findIndex(o => o.id === order.id);
					if (orderIndex !== -1) {
						this.orders[orderIndex].orderStatus = 'CANCELLED';
						this.orders[orderIndex].status = 'canceled';
						this.orders[orderIndex].cancelReason = reason;
						this.orders[orderIndex].cancelTime = new Date().toISOString();

						this.$set(this.orders, orderIndex, this.orders[orderIndex]);
					}

					uni.hideLoading();
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});

					// 刷新订单列表
					setTimeout(() => {
						this.loadOrders();
					}, 1000);

				} else {
					throw new Error(res?.msg || res?.message || '取消订单失败');
				}

			} catch (error) {
				uni.hideLoading();
				console.error('取消订单失败:', error);

				uni.showToast({
					title: error.message || '取消订单失败，请重试',
					icon: 'none'
				});
			}
		},

		// 跳转到订单详情页面
		goToOrderDetail(order) {
			// console.log('跳转到订单详情页面:', order);
			uni.navigateTo({
				url: `/pages/dingdanxiangqing/dingdanxiangqing?orderId=${order.id}&orderData=${encodeURIComponent(JSON.stringify(order))}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.order-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.user-info {
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.user-label {
	font-size: 28rpx;
	color: #666;
	margin-right: 20rpx;
}

.user-value {
	font-size: 28rpx;
	color: #ff4444;
	font-weight: bold;
}

.debug-panel {
	background-color: #f8f9fa;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	border-left: 4rpx solid #007bff;
}

.debug-title {
	font-size: 26rpx;
	color: #007bff;
	font-weight: bold;
	display: block;
	margin-bottom: 15rpx;
}

.debug-item {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 8rpx;
	line-height: 1.4;
}

.debug-info {
	background-color: #f8f9fa;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	border-left: 4rpx solid #007bff;
}

.debug-title {
	font-size: 26rpx;
	color: #007bff;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.debug-text {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 5rpx;
}

.status-tabs {
	display: flex;
	background-color: #fff;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
	position: sticky;
	top: 0;
	z-index: 100;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;

	&.active {
		color: #ff4444;
		font-weight: bold;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60rpx;
			height: 4rpx;
			background-color: #ff4444;
			border-radius: 2rpx;
		}
	}
}

.order-list {
	padding: 20rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	cursor: pointer;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	&:hover {
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
}

.store-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.store-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.order-basic-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.order-id {
	font-size: 24rpx;
	color: #666;
}

.order-time {
	font-size: 24rpx;
	color: #999;
}

.buyer-info {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.buyer-label {
	font-size: 26rpx;
	color: #666;
	margin-right: 10rpx;
}

.buyer-name {
	font-size: 26rpx;
	color: #333;
	font-weight: bold;
}

.order-status {
	font-size: 26rpx;

	&.status-unpaid {
		color: #ff6b35;
	}

	&.status-paid {
		color: #34c759;
	}

	&.status-unshipped {
		color: #ff9500;
	}

	&.status-shipped {
		color: #007aff;
	}

	&.status-unreceived {
		color: #007aff;
	}

	&.status-received {
		color: #34c759;
	}

	&.status-completed {
		color: #34c759;
	}

	&.status-canceled {
		color: #ff6b35;
	}

	&.status-unknown {
		color: #999;
	}
}

.product-info {
	margin-bottom: 20rpx;
}

.product-item {
	display: flex;
	margin-bottom: 20rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-right: 20rpx;
}

.product-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
	line-height: 1.4;
	margin-bottom: 10rpx;
}

.product-price-qty {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-size: 30rpx;
	color: #ff4444;
	font-weight: bold;
}

.product-qty {
	font-size: 26rpx;
	color: #f00c0c;
}

.address-info {
	margin-bottom: 15rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.address-label {
	font-size: 26rpx;
	color: #666;
	margin-right: 10rpx;
}

.address-text {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
}

.order-amount-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-top: 1rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.order-amount {
	display: flex;
	align-items: center;
}

.amount-label {
	font-size: 26rpx;
	color: #666;
	margin-right: 10rpx;
}

.amount-value {
	font-size: 32rpx;
	color: #ff4444;
	font-weight: bold;
}

.order-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	padding: 16rpx 32rpx;
	border-radius: 50rpx;
	font-size: 26rpx;
	border: none;

	&.pay-btn {
		background-color: #ff4444;
		color: #fff;
	}

	&.cancel-btn {
		background-color: #fff;
		color: #ff4444;
		border: 1rpx solid #ff4444;
	}
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
}

.load-more-text {
	font-size: 26rpx;
	color: #999;
}

.scroll-container {
	height: 100vh;
}
</style>
